<template>
  <div class="rechargeBase">
    <div class="chargeBox" v-if="0">
      <div class="step1" v-if="chargeObj.step == 1">
        <h2>请输入您的充值金额</h2>
        <el-input v-model="chargeObj.money" type="number" class="inp" placeholder="请输入内容"></el-input>
        <span class="button-s" @click="nextStep">下一步</span>
      </div>
      <div class="step2" v-if="chargeObj.step == 2">
        <div class="box">
          <h2>填写付款金额和备注。</h2>
          <img class="payHander" src="../../../../assets/images/payEge.png" alt="支付案例">
          <span class="price">{{ chargeObj.money }}</span>
          <strong class="comment">{{ userInfo.userName }}</strong>
          <br>
          <b class="button-s showCode" @mouseover="chargeObj.showCode = true" @mouseout="chargeObj.showCode = false">去充值</b>
          <transition name="el-fade-in">
            <div class="erCode" v-if="chargeObj.showCode == true">
              <h1>打开
                <i class="zhifubao myIcon"></i>
                <em>支付宝</em>
              </h1>
              <h1>
                扫一扫下面二维码
              </h1>
              <img class="payCode" src="../../../../assets/images/payCode.png" alt="支付二维码">
              <h2>您的备注码：
                <strong>{{ userInfo.userName }}</strong>
              </h2>
              <h2>填写才能自动到账</h2>
            </div>
          </transition>
        </div>
      </div>
    </div>
    <ul class="steps" v-if="0">
      <li>
        <h1 class="attitions">注意：一定要正确填写转账信息</h1>
        <div class="content">
          <!-- <h2>输入您的充值金额及我们给您的备注</h2> -->
          <h6 v-for="index in 1" :key="index">备注填写错误会导致充值不到账！</h6>
          <div class="payEgeBox">
            <img class="payEge" src="../../../../assets/images/payEge.png" alt="支付案例">
            <span class="nums">填写您想要充值的金额</span>
            <span class="account">填写您的{{ logoInfo.substationName || '' }}帐号：
              <em>{{ userInfo.userName }}</em>
            </span>
          </div>
        </div>
      </li>
      <li class="line">
        <div class="linesItem"></div>
      </li>
      <li>
        <h1>第一步：</h1>
        <div class="content">
          <h2>
            打开
            <i class="zhifubao myIcon"></i>
            <em>手机支付宝</em>
            扫一扫
          </h2>
          <img class="payCode" src="../../../../assets/images/payCode.png" alt="支付二维码">
          <!-- <h2>Tips：确认转账成功后，预计1分钟内到账，若10分钟仍未到账请联系客服。</h2> -->
        </div>
        <h1>第二步：</h1>
        <div class="content">
          <h2>填写付款金额和备注。</h2>
        </div>
        <h1>第三步：</h1>
        <div class="content">
          <h2>确认转账成功后，预计1分钟内到账，若10分钟仍未到账请联系客服。</h2>
        </div>
      </li>
    </ul>
    <div class="attitionBox" v-if="0">
      <div class="step1" v-if="chargeObj.step == 1">
        <h1 v-for="(item) in 3" :key="item">一定要将您的帐号填写在转账备注中，否则不到账</h1>
        <div class="imgBox">
          <img class="empImg" src="@/assets/images/payEge.png" alt="ege">
          <span>{{ userInfo.userName }}</span>
        </div>
        <span class="button-s" @click="chargeObj.step = 2">去扫码付款</span>
      </div>
      <div class="step2" v-if="chargeObj.step == 2">
        <h1>扫码转账</h1>
        <h2>请打开
          <i class="zhifubao"></i>
          扫一扫转账充值
        </h2>
        <div class="payCode">
          <img src="@/assets/images/payCode.png" alt="">
        </div>
        <div class="tipsBox">
          <span>{{ userInfo.userName }}</span>
        </div>
      </div>
    </div>
    <div class="payBox">
      <div class="payCode">
        <div class="showCode">
          <div class="logo">
            <img src="@/assets/images/zfLogo.png" alt="l">
          </div>
          <div class="boxsBlue">
            <h6>请打开扫一扫转账充值</h6>
            <img src="@/assets/images/payCode.png" alt="c">
          </div>
        </div>
      </div>
      <div class="tips">
        <h2>
          <i class="el-icon-warning"></i>
          转账时，一定要将您的账户填写在转账备注中，否则将不到账。
        </h2>
        <div class="showTips">
          <img src="@/assets/images/payEge.png" alt="p">
          <p>此处填写备注 例：
            <span>{{ userInfo.userName }}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="footer">
      <h2>如果没有填写备注/未到账，请点我</h2>
      <b class="button-n" @click="goWhere('forgetCommon')">忘记填写备注</b>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapGetters } from 'vuex'
export default {
  name: 'rechargeBase',
  data () {
    return {
      chargeObj: {
        step: 1,
        money: '',
        showCode: false
      }
    }
  },
  computed: {
    ...mapGetters([
      'userInfo',
      'logoInfo'
    ])
  },
  methods: {
    goWhere (route) {
      this.$router.push({ name: route })
    },
    nextStep () {
      if (this.chargeObj.money === '') {
        this.$message({
          message: '请输入您的充值金额',
          type: 'warning'
        })
      } else {
        this.chargeObj.step = 2
      }
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../../assets/stylus/index.styl'
.rechargeBase
  padding 20px 40px
  .chargeBox
    .step1
      padding 50px 0 200px
      display flex
      flex-direction column
      justify-content center
      align-items center
      h2
        fontSize(22px, 30px, #FF7503)
        font-weight bold
      .inp
        width 300px
        margin 20px 0 40px
    .step2
      display flex
      justify-content center
      .box
        text-align center
        position relative
        h2
          fontSize(22px, 30px, #FF7503)
          font-weight bold
          margin-bottom 20px
        .payHander
          width 345px
          box-shadow 0 2px 10px #E4E7ED
        .price
          position absolute
          top 272px
          left 55px
          fontSize(26px, 30px, $mainColor)
          font-weight bold
        .comment
          position absolute
          top 325px
          left -180px
          fontSize(30px, 30px, $mainColor)
          font-weight bold
          &:before
            content '→'
            position absolute
            top -55px
            left 190px
            fontSize(120px, 1, $mainColor)
            font-weight bold
          &:after
            content '必填'
            position absolute
            width 50px
            top 8px
            left 320px
            fontSize(18px, 1, $mainColor)
        .showCode
          margin-top 40px
        .erCode
          position absolute
          left 360px
          bottom 100px
          background #88eeff
          .payCode
            width 200px
            height 200px
          h1
            fontSize(18px, 30px, $fontColor)
            font-weight bold
          h2
            fontSize(18px, 30px, $fontColor)
            strong
              color $mainColor
              font-weight bold
  .steps
    display flex
    justify-content space-between
    li
      display flex
      align-items center
      text-align center
      flex 1
      flex-direction column
      margin-bottom 40px
      margin-right 20px
      &:last-child
        margin-right 0
      h1
        // width 100px
        fontSize(18px, 30px, #FF7503)
        font-weight bold
      .attitions
        font-size 22px
      .content
        flex 1
        h2
          fontSize(16px, 30px, $fontColor)
          margin-bottom 24px
        h6
          fontSize(16px, 30px, $mainColor)
          font-weight bold
          margin-bottom 20px
        em
          color #00AAEF
          font-weight bold
        .payEgeBox
          position relative
          .payEge
            width 345px
            box-shadow 0 2px 10px #E4E7ED
          span
            position absolute
            white-space nowrap
            left 80px
            height 40px
            line-height 40px
            padding 0 30px
            border 1px solid #FF7503
            font-size 16px
            color #FF7503
            font-weight bold
            background #ffffff
            &:before
              content ''
              position absolute
              background #ffffff
              left -10px
              top 15px
              width 15px
              height 10px
              border-top 1px solid #FF7503
              border-left 1px solid #FF7503
              transform rotate(-25deg) skew(45deg)
          .nums
            top 215px
            font-size 14px
          .account
            font-size 14px
            top 300px
            left 44px
            &:before
              top -7px
              left 0
              transform rotate(65deg) skew(45deg)
            em
              color #FF0437
              font-size 20px
              font-weight bold
        .payCode
          width 185px
          height 185px
    .line
      flex none
      width 2px
      align-self center
      .linesItem
        width 0
        border 1px dashed #FF7503
        height 500px
  .attitionBox
    padding 0
    >div
      display flex
      flex-direction column
      justify-content center
      align-items center
    .step1
      h1
        fontSize(20px, 30px, $mainColor)
        font-weight bold
        letter-spacing 4px
      .imgBox
        position relative
        margin 20px 0
        box-shadow 0 2px 10px #E4E7ED
        .empImg
          width 345px
        span
          position absolute
          top 266px
          left 70px
          fontSize(30px, 1, $mainColor)
          font-weight bold
          &:before
            content '必填'
            position absolute
            top -30px
            left -130px
            fontSize(24px, 30px, $mainColor)
          &:after
            content '☞'
            position absolute
            top -30px
            left -140px
            fontSize(100px, 1, $mainColor)
    .step2
      h1
        fontSize(24px, 30px, $fontColor)
        font-weight bold
        margin-bottom 20px
      h2
        fontSize(20px, 30px, $fontColor)
      .payCode
        margin 20px 0
        width 200px
        height 200px
        img
          width 100%
          height 100%
      .tipsBox
        position relative
        width 345px
        height 170px
        background url('../../../../assets/images/payEge.png') no-repeat
        background-position-y 100%
        background-size 100%
        box-shadow 0 2px 10px #E4E7ED
        span
          position absolute
          top 65px
          left 66px
          fontSize(30px, 1, $mainColor)
          font-weight bold
          &:before
            content '别忘了备注'
            position absolute
            top -30px
            left -175px
            fontSize(24px, 30px, $mainColor)
          &:after
            content '☞'
            position absolute
            top -30px
            left -140px
            fontSize(100px, 1, $mainColor)
  .payBox
    display flex
    // padding-bottom 50px
    border-bottom 1px dashed #999999
    .payCode
      width 260px
      .button-n
        margin-top 50px
      .showCode
        box-shadow 0 1px 2px #dedede
        border-radius 5px
        display flex
        flex-direction column
        align-items center
        .logo
          padding 16px 70px
          background #ffffff
          img
            width 120px
        .boxsBlue
          background #42AAE0
          padding 15px 50px
          h6
            background #ffffff
            line-height 36px
            fontSize(14px, 36px, #42AAE0)
            border-radius 18px
            text-align center
            margin-bottom 20px
          img
            width 160px
    .tips
      margin-left 50px
      h2
        fontSize(20px, 28px, #333333)
        font-weight bold
        i
          fontSize(28px, 28px, $mainColor)
          margin-right 10px
      .showTips
        width 240px
        margin 36px auto
        box-shadow 0 1px 2px #dedede
        position relative
        text-align center
        img
          width 100%
        p
          position absolute
          bottom 35px
          width 100%
          left -12px
          right 0
          margin 0 auto
          fontSize(14px, 18px, $mainColor)
          // font-weight bold
          padding 14px 10px
          border 2px solid $mainColor
          span
            fontSize(18px, 18px, $mainColor)
            font-weight bold
  .footer
    text-align center
    >h2
      fontSize(16px, 30px, $fontColor)
      margin-top 20px
.zhifubao
  display inline-block
  width 40px
  height 40px
  vertical-align middle
  background url('../../../../assets/images/zhifubao.png') no-repeat
  background-size 100% 100%
  margin 0 12px
</style>
